/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="home-search-panel">
    <Search :isShrink="isShrink" @changeShrink="changeShrink" @doSearch="doSearch" />
    <Result ref="resultPanel" :isShrink="isShrink" :searchfilter="searchfilter" @treeNodeClick="treeNodeClick" @handleClickItem="handleClickItem" @changeType="changeType" @getDeviceRanges="onGetDeviceRanges"/>
    <deviceChart v-if="!isShrink" :searchfilter="searchfilter" @onDeviceSearch = "onDeviceSearch"></deviceChart>
    <div class="layers-control" v-if="bizType === 'devicemanager'">
      <layerControl ref="layerControl"
                    :isShowPattern="isShowPattern"
                    :targetDeviceIds="showPatternDeviceIds"
                    :showLevel="showLevel"></layerControl>
        <div class="layerControl">
          <el-button type="text"
                    :icon="isShowPattern ? 'iconfont icon-shishifangan active' : 'iconfont icon-shishifangan'"
                    :class="{'active': isShowPattern}"
                    @click="onRealtimeButtonClick">
                    {{this.$t('openatc.greenwaveoptimize.realtimePattern') }}
          </el-button>
        </div>
    </div>
    <div :class="isArrowDown ? 'layers-example' : 'layers-example shrink'" v-show="isShowPattern">
      <div class="top">
        <div class="top-left">{{$t('openatc.gis.example')}}</div>
        <div class="top-right">
          <i :class="isArrowDown ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="onArrowDownClick"></i>
        </div>
      </div>
      <div class="center">
        <div class="title">{{$t('openatc.gis.signalPattern')}}</div>
        <div class="content">
          <!-- <PatternStateFull></PatternStateFull> -->
          <div class="example">
            <div class="example-left">
              <div class="direction">{{$t('openatc.gis.phaseDirection')}}</div>
              <div class="countdown">{{$t('openatc.gis.countdown')}}</div>
            </div>
            <div class="example-right">
              <div class="right-top">
                <div class="curPattern">{{$t('openatc.gis.currentPattern')}}</div>
                <div class="runtime">{{$t('openatc.gis.runTime_cycleTime')}}</div>
              </div>
              <div class="right-bottom">
                <div class="control">{{$t('openatc.patternstatistic.controltype')}}</div>
                <div class="offset">{{$t('openatc.devicemanager.offset')}}</div>
                <div class="greenUsage">{{$t('openatc.dutyroute.greenpercent')}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layer-example-bottom">
        <div class="layer-example-title">{{$t('openatc.gis.crossImg')}}</div>
        <div class="layer-example-content">
          <div class="left">
            <div class="list-icon">
              <img :src="deviceYellowFlashIcon" alt="">
              <div class="text">{{$t('openatccomponents.overview.modelList1')}}</div>
            </div>
            <div class="list-icon">
              <img :src="deviceFixedIcon" alt="">
              <div class="text">{{$t('openatccomponents.overview.modelList5')}}</div>
            </div>
            <div class="list-icon">
              <img :src="deviceAllRedIcon" alt="">
              <div class="text">{{$t('openatccomponents.overview.modelList2')}}</div>
            </div>
            <div class="list-icon">
              <img :src="deviceCoordinateIcon" alt="">
              <div class="text">{{$t('openatc.gis.routeCoordination')}}</div>
            </div>
            <div class="list-icon">
              <img :src="deviceTurnOffIcon" alt="">
              <div class="text">{{$t('openatccomponents.overview.modelList3')}}</div>
            </div>
            <div class="list-icon">
              <img :src="deviceOnlineIcon" alt="">
              <div class="text">{{$t('openatc.gis.others')}}</div>
            </div>
          </div>
          <div class="right">
            <div class="list-icon">
              <img :src="deviceOfflineIcon" alt="">
              <div class="text">{{$t('openatc.devicemanager.offline')}}</div>
            </div>
            <!-- <div class="list-icon">
              <img :src="deviceOnlineIcon" alt="">
              <div class="text">在线</div>
            </div>
            <div class="list-icon">
              <img :src="deviceOnlineIcon" alt="">
              <div class="text">在线</div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from './search'
import Result from './result'
import deviceChart from './deviceChart.vue'
import layerControl from '../../../GisManager/components/layerControl/layerControl.vue'
import PatternStateFull from '../../../../components/PhaseMarker/svg/patternStateFull.vue'
export default {
  name: 'homeSearchPanel',
  data () {
    return {
      deviceOnlineIcon: require('../../../../assets/gis/首页在线.svg'),
      deviceOfflineIcon: require('../../../../assets/gis/离线.svg'),
      deviceYellowFlashIcon: require('../../../../assets/gis/黄闪.svg'),
      deviceAllRedIcon: require('../../../../assets/gis/全红.svg'),
      deviceTurnOffIcon: require('../../../../assets/gis/关灯.svg'),
      deviceFixedIcon: require('../../../../assets/gis/首页定周期.svg'),
      deviceInterruptIcon: require('../../../../assets/gis/实时干预.svg'),
      deviceCoordinateIcon: require('../../../../assets/gis/干线协调.svg'),
      isArrowDown: true,
      bizType: 'devicemanager',
      showLevel: 2,
      showPatternDeviceIds: ['gkxlygnl'],
      isShowPattern: false,
      isShrink: false,
      searchfilter: ''
    }
  },
  components: {
    PatternStateFull,
    layerControl,
    deviceChart,
    Search,
    Result
  },
  props: {

  },
  watch: {

  },
  methods: {
    onArrowDownClick () {
      this.isArrowDown = !this.isArrowDown
    },
    onDeviceSearch (list) {
      const ids = list.map(item => item.agentid)
      this.showPatternDeviceIds = ids
    },
    onRealtimeButtonClick () {
      this.isShowPattern = !this.isShowPattern
    },
    changeShrink (isShrink) {
      this.isShrink = isShrink
    },
    doSearch (searchfilter) {
      this.searchfilter = searchfilter
      this.$refs.resultPanel.doSearch(searchfilter)
      this.$emit('doSearch', searchfilter)
    },
    treeNodeClick (data) {
      this.$emit('treeNodeClick', data)
    },
    handleClickItem (data) {
      this.$emit('handleClickItem', data)
    },
    onGetDeviceRanges (list) {
      const ids = list.map(item => item.agentid)
      this.showPatternDeviceIds = ids
    },
    changeType (type) {
      this.bizType = type
      if (type !== 'devicemanager') {
        this.isShowPattern = false
      }
      this.$emit('changeType', type)
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">
</style>
